<template>
  <div id="app" ref="app" :class="{ area: area, standard: standard }">
    <router-view />
    <IframeContainer v-show="!area && !standard" ref="scenecontent" />
    <VideoViewVue v-if="!area && !standard"></VideoViewVue>
  </div>
</template>
<script>
import VideoViewVue from '@/components/VideoView.vue';
import IframeContainer from '@/components/IframeContainer.vue';
export default {
  // name: 'APP',
  data() {
    return {
      area: false,
      standard: false
    };
  },
  watch: {
    $route: {
      handler(val) {
        if (val.path === '/dicision') {
          if (document.body.clientWidth > 1920) {
            // 大屏
            this.area = true;
            this.standard = false;
          } else {
            // 标准
            this.standard = true;
            this.area = false;
          }
        } else {
          // 不影响其他页面
          this.standard = false;
          this.area = false;
        }
      },
      immediate: true,
      deep: true
    }
  },
  components: {
    VideoViewVue,
    IframeContainer
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="scss">
:root {
  --animate-delay: 0.2s !important;
}
#app {
  // width: 100vw;
  height: 67.5rem;
}
// 数据大屏
.area {
  width: 216rem !important;
  height: 67.5rem !important;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background-image: url("@/assets/img/decisionAnalysis/area_bg.png") !important;
  background-repeat: no-repeat !important;
  background-size: 216rem 67.5rem !important;
}
// 标准屏幕
.standard {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  width: 120rem !important;
  height: 67.5rem !important;
  background-image: url("@/assets/img/decisionAnalysis/standard_bg.png");
  // background-repeat: no-repeat;
  background-position: 1.2rem -0.6rem;
}

// 列表没有数据是展示信息样式
.isCommonLists{
  text-align: center;
  font-size: .75rem;
  color: #ADADAD;
}
// 单行文本超出显示省略号
.overflow-ellipsis {
  width: 11.125rem;
  overflow:hidden;
  text-overflow:ellipsis;
  display: inline-block;
  white-space: nowrap;
}
</style>
